<template>
  <span v-if="showTooltip">{{ categoryName }}</span>
  <el-tooltip v-else effect="dark" placement="top">
    <div class="cateName">{{ categoryName }}</div>
    <template #content>
      {{ categoryName }}
    </template>
  </el-tooltip>
</template>

<script setup>
import { getLength } from '@/utils/index'
const emits = defineEmits(['add', 'edit', 'delete'])
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    },
  },
  showTooltip: {
    type: Boolean,
    default: false,
  },
  categoryName: {
    type: String,
    default: () => {
      return ''
    },
  },
})

function removeCategory() {
  emits('delete', props.data)
}

function editCategory() {
  console.log(props.data)
  emits('edit', props.data)
}

function addCategory() {
  emits('add', props.data)
}
</script>

<style lang="scss" scoped>
.cateName {
  max-width: 184px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
